<template>
  <div>
        <el-form
      :model="formData"
      inline
      style="display: flex; justify-content: flex-end; margin-top: 10px"
    >
      <el-form-item prop="userId">
        <el-input
          v-model="formData.userId"
          placeholder="请输入用户id"
        ></el-input>
      </el-form-item>

      <el-form-item prop="valueId">
        <el-input
          v-model="formData.valueId"
          placeholder="请输入商品id"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="getCollect" type="primary" icon="el-icon-search">查找</el-button>
      </el-form-item>
    </el-form>



    <el-table v-loading="CollectLoading" :data="CollectData" border="">
      <el-table-column
        align="center"
        label="收藏id"
        prop="id"
      ></el-table-column>
      <el-table-column
        align="center"
        label="用户ID"
        prop="userId"
      ></el-table-column>
      <el-table-column
        align="center"
        label="商品id"
        prop="valueId"
      ></el-table-column>
      <el-table-column
        align="center"
        label="添加时间"
        prop="addTime"
      ></el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
  </div>
</template>
  
<script>
import axios from "axios";
export default {
  name: "userCollect",
  componentTitle: "用户收藏",
  data() {
    return {
      CollectLoading: false,
      pageInfo: {
        page: 1,
        limit: 10,
        total: 0,
      },

      CollectData: [],
      formData:{
          userId: "",
          valueId: "",
      }
    };
  },
  mounted() {
    console.log("test-result");
    this.getCollect();
  },
  methods: {
    getCollect() {
      this.CollectLoading = true;

      axios({
        url: "http://192.168.200.251:8888/admin/collect/list",
        method: "get",
        params: {
          page: this.pageInfo.page,
          limit: this.pageInfo.limit,
         ...this.formData
        },
        headers: {
          "shopping-admin-token": sessionStorage.getItem(
            "shopping-admin-token"
          ),
        },
      }).then((res) => {
        this.CollectLoading = false;

        this.CollectData = res.data.data.list;
        this.pageInfo.total = res.data.data.total;
      });
    },
    handleSizeChange(value) {
      this.pageInfo.limit = value;

      this.getCollect();
    },
    // 当前页码的切换
    handleCurrentChange(value) {
      this.pageInfo.page = value;

      this.getCollect();
    },
  },
};
</script>




